<script>
import { Image as VanImage, Grid, GridItem, Cell, CellGroup } from 'vant';
import axios from "axios";

export default {
  name: "MyView",
  components: {
    [VanImage.name]: VanImage,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      user:{},
      userDetail:{},
      userInfo: {
        name: '张三',
        phone: '18074432667',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' // 替换为实际头像地址
      },
      orderItems: [
        { text: '维修工单', icon: 'setting', color: '#1989fa',path: '/wo-de' },
        { text: '保洁工单', icon: 'delete', color: '#1989fa',path:'/workorderbjwd'},
        { text: '运送工单', icon: 'logistics', color: '#1989fa',path: '/ticketwd' },
      ],
      requestItems: [
        { text: '运维报修', icon: 'setting', color: '#1989fa', path: '/workorderbaoxiu'},
        { text: '保洁报单', icon: 'delete', color: '#1989fa' ,path: '/workorderbd'},
        { text: '运送申请', icon: 'logistics', color: '#1989fa', path: '/transport-request' },
        { text: '住房申请', icon: 'home-o', color: '#1989fa',path: 'applyForHome' },
      ],
    }
  },
  methods: {
    toLogin(){
      this.$router.push('/login')
    },
    findById(){
      axios.post("http://localhost:9999/api-user-service/user/findById?id="+this.user.userId).then(res=>{
        this.userDetail = res.data;
      })
    },
    toMyDetail(){
      this.$router.push('/myDetail')
    },
    toMySetting(){
      this.$router.push('/mySetting')
    },
    handleItemClick(item) {
      if (item.path) {
        this.$router.push(item.path);
      }
    },
    toFacialRecognition(){
      this.$router.push({
        path: '/facialRecognition',
        query:{
          userId:this.user.userId
        }
      })
    }
  },
  created(){
    this.user = JSON.parse(localStorage.getItem("aa"));
    if (this.user==null){

    }else{
      this.findById();
    }
  }
}
</script>

<template>
  <div class="my-view">
    <!-- 用户信息卡片 -->
    <div class="user-card" @click="toMyDetail()" v-if="this.user!=null">
      <van-image
          round
          width="60"
          height="60"
          :src="userDetail.photo"
      />
      <div class="user-info" v-if="this.user!=null">
        <div class="username">用户名称：{{ userDetail.username }}</div>
        <div class="phone">手机号码：{{ userDetail.phone }}</div>
      </div>
    </div>
    <div v-if="this.user==null" class="user-card">
      <span>请先登录！！！</span>
      <van-button type="info" round @click="toLogin()">登录</van-button>
    </div>
    <!-- 我的工单 -->
    <div class="section">
      <div class="section-title">我的工单</div>
      <van-grid :column-num="3" :border="false">
        <van-grid-item
            v-for="item in orderItems"
            :key="item.text"
            :text="item.text"
            @click="handleItemClick(item)"
        >
          <template #icon>
            <van-icon :name="item.icon" :color="item.color" size="26" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 我的申请 -->
    <div class="section">
      <div class="section-title">我的申请</div>
      <van-grid :column-num="4" :border="false">
        <van-grid-item
            v-for="item in requestItems"
            :key="item.text"
            :text="item.text"
            @click="handleItemClick(item)"
        >
          <template #icon>
            <van-icon :name="item.icon" :color="item.color" size="26" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 其他选项 -->
    <van-cell-group>
      <van-cell title="身份认证" is-link @click="toFacialRecognition()" />
      <van-cell title="系统设置" is-link @click="toMySetting()" />
    </van-cell-group>

    <!-- 底部导航栏 -->
    <van-tabbar route>
      <van-tabbar-item icon="home-o" to="/medical">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/message">消息</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.my-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.user-card {
  background-color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-info {
  margin-left: 16px;
}

.username {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.phone {
  font-size: 14px;
  color: #666;
}

.section {
  background-color: #fff;
  margin-bottom: 12px;
}

.section-title {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #323233;
  border-bottom: 1px solid #ebedf0;
}

:deep(.van-grid-item__content) {
  padding: 16px 8px;
}

:deep(.van-grid-item__icon) {
  color: #2b5ee3;
}

:deep(.van-grid-item__text) {
  font-size: 13px;
  margin-top: 8px;
}

:deep(.van-cell-group) {
  margin-top: 12px;
}
</style>
